import React from 'react';
import { useGame } from '../GameContext';
import { motion } from 'framer-motion';

const GameOverModal: React.FC = () => {
  const { state, restartGame } = useGame();
  const { gameOver, money } = state;

  if (!gameOver) return null;

  // 计算最终得分（基于金钱）
  const finalScore = money;
  
  // 获取评级
  const getRating = (score: number) => {
    if (score >= 500) return { stars: 5, text: '披萨大师！', color: 'text-amber-500' };
    if (score >= 300) return { stars: 4, text: '优秀厨师！', color: 'text-green-500' };
    if (score >= 200) return { stars: 3, text: '合格厨师', color: 'text-blue-500' };
    if (score >= 100) return { stars: 2, text: '初级学徒', color: 'text-yellow-500' };
    return { stars: 1, text: '还需努力', color: 'text-red-500' };
  };

  const rating = getRating(finalScore);
  
  // 生成星星
  const renderStars = (count: number) => {
    return Array(count).fill(0).map((_, index) => (
      <span key={index} className="text-3xl text-yellow-400">★</span>
    ));
  };

  return (
    <motion.div
      className="fixed inset-0 flex items-center justify-center bg-black/70 z-50"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      <motion.div
        className="bg-white rounded-xl p-8 max-w-md w-full mx-4"
        initial={{ scale: 0.8, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.5, delay: 0.2 }}
      >
        <motion.h2 
          className="text-4xl font-bold text-center mb-4 text-red-600"
          animate={{ 
            scale: [1, 1.1, 1],
            textShadow: ['none', '0 0 8px rgba(239, 68, 68, 0.6)', 'none']
          }}
          transition={{ repeat: Infinity, duration: 2 }}
        >
          游戏结束！
        </motion.h2>
        
        <div className="text-center mb-6">
          <p className="text-xl mb-2">你的最终得分</p>
          <motion.p 
            className="text-5xl font-bold text-green-600 mb-4"
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.5 }}
          >
            ${finalScore}
          </motion.p>
          
          <div className="flex justify-center space-x-1 mb-2">
            {renderStars(rating.stars)}
          </div>
          <p className={`text-lg font-semibold ${rating.color}`}>{rating.text}</p>
        </div>
        
        <div className="space-y-4">
          <motion.button
            className="game-button success w-full py-3 text-lg"
            onClick={restartGame}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.7 }}
          >
            再玩一次
          </motion.button>
          
          <motion.button
            className="game-button info w-full py-3 text-lg"
            onClick={() => {
              // 这里可以添加返回主菜单的逻辑
              // 目前和再玩一次功能相同
              restartGame();
            }}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.9 }}
          >
            返回主菜单
          </motion.button>
        </div>
        
        {/* 游戏统计信息 */}
        <motion.div 
          className="mt-6 pt-6 border-t border-gray-200"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 1.1 }}
        >
          <h3 className="text-lg font-semibold mb-2">游戏统计</h3>
          <div className="grid grid-cols-2 gap-2 text-sm">
            <div className="text-gray-600">最终金钱：</div>
            <div className="font-semibold text-green-600">${money}</div>
            <div className="text-gray-600">声誉：</div>
            <div className="font-semibold text-red-600">0/100</div>
          </div>
        </motion.div>
      </motion.div>
    </motion.div>
  );
};

export default GameOverModal;